// /**
//  * @name Home
//  * @author wxd
//  * @desc
//  * @date
//  */

// import React, { Component } from "react"
// import logo from "@/logo.svg"
// import { Button } from "antd"

// class Home extends Component {
//   test001Route = () => {
//     this.props.history.push({ pathname: "/test001", state: { id: "111111111111111" } })
//   }

//   render() {
//     return (
//       <div>
//         Home
//         <img src={logo} style={{ width: "50px", height: "50px" }} />
//         <Button type="primary" onClick={this.test001Route}>
//           jump Test001
//         </Button>
//       </div>
//     )
//   }
// }

// export default Home


/** */

import React, { Component } from "react"
import $ from 'jquery'
import { Player, BigPlayButton } from 'video-react'
import 'video-react/dist/video-react.css'
import { ExpandOutlined } from '@ant-design/icons'
import { Modal } from 'antd'
import styles from "./styles.module.css"


const defaultLogo = require('../../img/logo.png')
const srcList = [
  { id: '0', src: './mp4/test.mp4' },
  { id: '1', src: './mp4/test.mp4' },
]
const srcsLog = require('C:/Users/dev001/Desktop/test.mp4')

class Home extends Component {
  state = {
    showNum: null,
    showSrc: '',
    modalShow: false,

  }
  componentDidMount() {


  }
  mouseOver = (id) => {
    this.setState({ showNum: id })
  }
  mouseOut = () => {
    this.setState({ showNum: null })
  }
  doubClick = (val) => {
    //模拟全屏
    this.setState({ modalShow: true, showSrc: val })
  }
  modalCancel = () => {
    this.setState({ modalShow: false })
  }
  render() {
    const { showNum } = this.state
    // $("#test").bind("contextmenu", function () {//取消右键事件
    //   return false;
    // })
    return (
      <div>
        {
          srcList.map(item => (
            <div key={item.id} style={{ border: '2px solid #333', padding: '10px', marginBottom: '30px' }}>
              <div className={styles.bodys} onMouseOver={() => this.mouseOver(item.id)} onMouseOut={this.mouseOut} >
                {
                  item.id !== showNum ? (<Imgs />) : (<Videos showNum={showNum} srcs={item.src} id={item.id} enter={this.mouseOver} doubClick={this.doubClick} />)
                }
              </div>
            </div>
          ))
        }
        12132121

        <Modal className={styles.bodys} title={null} footer={null} visible={this.state.modalShow} onCancel={this.modalCancel}>
          <video className={styles.videos} src={srcsLog} controls="controls" autoPlay={true} loop={true} muted>
            您的浏览器不支持 video 标签。
          </video>
        </Modal>
      </div>
    )

  }
}

const Imgs = () => {
  return <div className={styles.bodys} style={{ backgroundImage: `url("${defaultLogo}")` }}></div>
}
const Videos = ({ showNum, srcs, id, enter, doubClick }) => {
  // $("video").bind("contextmenu", function () {//取消右键事件
  //   return false;
  // })
  console.log('srcs===', srcs)
  let show = showNum ? true : false
  return (
    <div className={styles.bodys} onDoubleClick={() => doubClick(srcsLog)} onClick={() => doubClick(srcsLog)}>
      <video id='video' className={styles.videos} src={srcsLog} controls="controls" autoPlay={show} loop={true} muted>
        您的浏览器不支持 video 标签。
        <ExpandOutlined className={styles.full} />
      </video>
      {/* <Player src={srcs} autoPlay={show} fluid={false} width={400} height={160}>
        <BigPlayButton position="center" />
      </Player> */}
      {/* <i className={styles.full}>[&nbsp;&nbsp;]</i> */}
      {/* <ExpandOutlined className={styles.full} onMouseOver={() => enter(id)} /> */}
    </div>
  )
}
export default Home

